{% extends 'base_templates/_page_layout.html' %}
{% load staticfiles %}

{% block css %}
    <link href="/static/plugins/minton/plugins/summernote/summernote-bs4.css" rel="stylesheet" />

    <link href="/static/plugins/minton/plugins/switchery/switchery.min.css" rel="stylesheet" />

    <link href="/static/plugins/minton/css/bootstrap.min.css" rel="stylesheet" type="text/css">
    <link href="/static/plugins/minton/css/icons.css" rel="stylesheet" type="text/css">
    <link href="/static/plugins/minton/css/style.css" rel="stylesheet" type="text/css">

    <script src="/static/plugins/minton/js/modernizr.min.js"></script>
<!--Footable-->
<link href="/static/plugins/minton/plugins/footable/css/footable.core.css" rel="stylesheet">

    <style>

    /*.dropdown-menu {
        position: absolute;
        top: 100%;
        left: 0;
        z-index: 10001;
        display: none;
        float: left;
        min-width: 0;
        padding: 0;
        margin: 0 0;
        font-size: 0;
        color: #212529;
        text-align: left;
        list-style: none;
        background-color: #fff;
        background-clip: padding-box;
        border: 0px solid rgba(0,0,0,.15);
        border-radius: 0;
    }*/
   </style>
{% endblock %}

{% block conent %}

<div class="row">
    <h2>Select files to upload</h2>
    <form name="upload" method="POST" enctype="multipart/form-data" action="http://10.30.0.41/upload">
      <input type="file" name="file1"><br>
      <input type="file" name="file2"><br>
      <input type="file" name="file3"><br>
      <input type="file" name="file4"><br>
      <input type="file" name="file5"><br>
      <input type="file" name="file6"><br>
      <input type="submit" name="submit" value="Upload">
      <input type="hidden" name="test" value="value">
    </form>
</div>

<div class="row">
    <div class="col-sm-12">
        <div class="card-box">
            <h4 class="m-t-0 header-title">Accordion</h4>
            <p class="text-muted m-b-30 font-13">
                include accordion in your FooTable.
            </p>

            <table id="demo-foo-accordion" class="table table-colored m-b-0 toggle-arrow-tiny">
                <thead>
                <tr>
                    <th data-toggle="true"> First Name </th>
                    <th> Last Name </th>
                    <th data-hide="phone"> Job Title </th>
                    <th data-hide="all"> DOB </th>
                    <th data-hide="all"> Status </th>
                </tr>
                </thead>
                <tbody>
                <tr>
                    <td>Isidra</td>
                    <td>Boudreaux</td>
                    <td>Traffic Court Referee</td>
                    <td>22 Jun 1972</td>
                    <td><span class="badge label-table badge-success">Active</span></td>
                </tr>
                <tr>
                    <td>Shona</td>
                    <td>Woldt</td>
                    <td>Airline Transport Pilot</td>
                    <td>3 Oct 1981</td>
                    <td><span class="badge label-table badge-dark">Disabled</span></td>
                </tr>
                <tr>
                    <td>Granville</td>
                    <td>Leonardo</td>
                    <td>Business Services Sales Representative</td>
                    <td>19 Apr 1969</td>
                    <td><span class="badge label-table badge-danger">Suspended</span></td>
                </tr>
                <tr>
                    <td>Easer</td>
                    <td>Dragoo</td>
                    <td>Drywall Stripper</td>
                    <td>13 Dec 1977</td>
                    <td><span class="badge label-table badge-success">Active</span></td>
                </tr>
                <tr>
                    <td>Maple</td>
                    <td>Halladay</td>
                    <td>Aviation Tactical Readiness Officer</td>
                    <td>30 Dec 1991</td>
                    <td><span class="badge label-table badge-danger">Suspended</span></td>
                </tr>
                <tr>
                    <td>Maxine</td>
                    <td><a href="#">Woldt</a></td>
                    <td><a href="#">Business Services Sales Representative</a></td>
                    <td>17 Oct 1987</td>
                    <td><span class="badge label-table badge-dark">Disabled</span></td>
                </tr>
                <tr>
                    <td>Lorraine</td>
                    <td>Mcgaughy</td>
                    <td>Hemodialysis Technician</td>
                    <td>11 Nov 1983</td>
                    <td><span class="badge label-table badge-dark">Disabled</span></td>
                </tr>
                <tr>
                    <td>Lizzee</td>
                    <td><a href="#">Goodlow</a></td>
                    <td>Technical Services Librarian</td>
                    <td>1 Nov 1961</td>
                    <td><span class="badge label-table badge-danger">Suspended</span></td>
                </tr>
                <tr>
                    <td>Judi</td>
                    <td>Badgett</td>
                    <td>Electrical Lineworker</td>
                    <td>23 Jun 1981</td>
                    <td><span class="badge label-table badge-success">Active</span></td>
                </tr>
                <tr>
                    <td>Lauri</td>
                    <td>Hyland</td>
                    <td>Blackjack Supervisor</td>
                    <td>15 Nov 1985</td>
                    <td><span class="badge label-table badge-danger">Suspended</span></td>
                </tr>
                <tr>
                    <td>Isidra</td>
                    <td>Boudreaux</td>
                    <td>Traffic Court Referee</td>
                    <td>22 Jun 1972</td>
                    <td><span class="badge label-table badge-success">Active</span></td>
                </tr>
                <tr>
                    <td>Shona</td>
                    <td>Woldt</td>
                    <td>Airline Transport Pilot</td>
                    <td>3 Oct 1981</td>
                    <td><span class="badge label-table badge-dark">Disabled</span></td>
                </tr>
                <tr>
                    <td>Granville</td>
                    <td>Leonardo</td>
                    <td>Business Services Sales Representative</td>
                    <td>19 Apr 1969</td>
                    <td><span class="badge label-table badge-danger">Suspended</span></td>
                </tr>
                <tr>
                    <td>Easer</td>
                    <td>Dragoo</td>
                    <td>Drywall Stripper</td>
                    <td>13 Dec 1977</td>
                    <td><span class="badge label-table badge-success">Active</span></td>
                </tr>
                <tr>
                    <td>Maple</td>
                    <td>Halladay</td>
                    <td>Aviation Tactical Readiness Officer</td>
                    <td>30 Dec 1991</td>
                    <td><span class="badge label-table badge-danger">Suspended</span></td>
                </tr>
                <tr>
                    <td>Maxine</td>
                    <td><a href="#">Woldt</a></td>
                    <td><a href="#">Business Services Sales Representative</a></td>
                    <td>17 Oct 1987</td>
                    <td><span class="badge label-table badge-dark">Disabled</span></td>
                </tr>
                <tr>
                    <td>Lorraine</td>
                    <td>Mcgaughy</td>
                    <td>Hemodialysis Technician</td>
                    <td>11 Nov 1983</td>
                    <td><span class="badge label-table badge-dark">Disabled</span></td>
                </tr>
                <tr>
                    <td>Lizzee</td>
                    <td><a href="#">Goodlow</a></td>
                    <td>Technical Services Librarian</td>
                    <td>1 Nov 1961</td>
                    <td><span class="badge label-table badge-danger">Suspended</span></td>
                </tr>
                <tr>
                    <td>Judi</td>
                    <td>Badgett</td>
                    <td>Electrical Lineworker</td>
                    <td>23 Jun 1981</td>
                    <td><span class="badge label-table badge-success">Active</span></td>
                </tr>
                <tr>
                    <td>Lauri</td>
                    <td>Hyland</td>
                    <td>Blackjack Supervisor</td>
                    <td>15 Nov 1985</td>
                    <td><span class="badge label-table badge-danger">Suspended</span></td>
                </tr>
                <tr>
                    <td>Isidra</td>
                    <td>Boudreaux</td>
                    <td>Traffic Court Referee</td>
                    <td>22 Jun 1972</td>
                    <td><span class="badge label-table badge-success">Active</span></td>
                </tr>
                <tr>
                    <td>Shona</td>
                    <td>Woldt</td>
                    <td>Airline Transport Pilot</td>
                    <td>3 Oct 1981</td>
                    <td><span class="badge label-table badge-dark">Disabled</span></td>
                </tr>
                <tr>
                    <td>Granville</td>
                    <td>Leonardo</td>
                    <td>Business Services Sales Representative</td>
                    <td>19 Apr 1969</td>
                    <td><span class="badge label-table badge-danger">Suspended</span></td>
                </tr>
                <tr>
                    <td>Easer</td>
                    <td>Dragoo</td>
                    <td>Drywall Stripper</td>
                    <td>13 Dec 1977</td>
                    <td><span class="badge label-table badge-success">Active</span></td>
                </tr>
                <tr>
                    <td>Maple</td>
                    <td>Halladay</td>
                    <td>Aviation Tactical Readiness Officer</td>
                    <td>30 Dec 1991</td>
                    <td><span class="badge label-table badge-danger">Suspended</span></td>
                </tr>
                <tr>
                    <td>Maxine</td>
                    <td><a href="#">Woldt</a></td>
                    <td><a href="#">Business Services Sales Representative</a></td>
                    <td>17 Oct 1987</td>
                    <td><span class="badge label-table badge-dark">Disabled</span></td>
                </tr>
                <tr>
                    <td>Lorraine</td>
                    <td>Mcgaughy</td>
                    <td>Hemodialysis Technician</td>
                    <td>11 Nov 1983</td>
                    <td><span class="badge label-table badge-dark">Disabled</span></td>
                </tr>
                <tr>
                    <td>Lizzee</td>
                    <td><a href="#">Goodlow</a></td>
                    <td>Technical Services Librarian</td>
                    <td>1 Nov 1961</td>
                    <td><span class="badge label-table badge-danger">Suspended</span></td>
                </tr>
                <tr>
                    <td>Judi</td>
                    <td>Badgett</td>
                    <td>Electrical Lineworker</td>
                    <td>23 Jun 1981</td>
                    <td><span class="badge label-table badge-success">Active</span></td>
                </tr>
                <tr>
                    <td>Lauri</td>
                    <td>Hyland</td>
                    <td>Blackjack Supervisor</td>
                    <td>15 Nov 1985</td>
                    <td><span class="badge label-table badge-danger">Suspended</span></td>
                </tr>
                </tbody>

            </table>
        </div>
    </div>
</div>

<div id="sse">
   <a href="javascript:WebSocketTest()">运行 WebSocket</a>
</div>

{% endblock %}

{% block js %}
<!--FooTable-->
<script src="/static/plugins/minton/plugins/footable/js/footable.all.min.js"></script>
<!--FooTable Example-->
<script src="/static/plugins/minton/pages/jquery.footable.js"></script>

<script type="text/javascript">
  var pushData = "hello world!"
  function WebSocketTest(){

    if ("WebSocket" in window){
      // alert("您的浏览器支持 WebSocket!");

      // 打开一个 web socket
      var ws = new WebSocket("ws://127.0.0.1:8088/websocket/message/send?auth={{ request.user.uuid }}&target={{ request.user.uuid }");

      ws.onopen = function(){
        // Web Socket 已连接上，使用 send() 方法发送数据
        // alert("数据发送中...");
        ws.send(pushData)
      };

      ws.onmessage = function (evt){ 
        var received_msg = evt.data;
        console.log(decodeURIComponent(received_msg));
      };

      ws.onclose = function(){ 
        // 关闭 websocket
        // alert("连接已关闭..."); 
      };
    }else{
      // 浏览器不支持 WebSocket
      // alert("您的浏览器不支持 WebSocket!");
    }
  }
</script>
        <script src="/static/plugins/minton/plugins/datatables/jquery.dataTables.min.js"></script>
        <script src="/static/plugins/minton/plugins/datatables/dataTables.bootstrap4.min.js"></script>
{% endblock %}


